import React from 'react'
import { info, success, Editor,error, Input, Table, Link, IconFont, DnD, Button, TitleBar, Select } from '../../ui-components'
import style from './style.templateEdit'
import { connect } from 'react-redux'
import util from '../../util'

@DnD()
class OnboardingDocuments extends React.Component {

  renderItem = (v, i) => (
    <li key={i} draggable>
      <span>{ v.documentName }</span>
      <div className={style.handle}>
        <Link icon="close" onClick={() => this.props.deleteOnboardingDocument(v)}/>
        <IconFont value="drag" className={style.drag}/>
      </div>
    </li>
  )

  render() {
    return (
      <ul className={style.onboardingDocuments}>
        {
          this.props.data.map(this.renderItem)
        }
      </ul>
    )
  }
}

export default
@connect(({ documents, profileTemplate, onboardingTemplate }) => ({ profileTemplate, onboardingTemplate, documents }))
class extends React.Component {

	state = {
		// 结束语
		epilogue: '',
		// 欢迎语
		prologue: '',
		// 员工档案模板
		profileTemplateId: '',
    // 模板名称
    displayName: ''
	}

  update = false

  componentWillReceiveProps(props) {
    if (util.isNull(this.props.onboardingTemplate.onboardingTemplate) && !util.isNull(props.onboardingTemplate.onboardingTemplate)) {
      const {
          displayName,
          prologue,
          epilogue,
          profileTemplateId
      } = props.onboardingTemplate.onboardingTemplate
      this.setState({
        displayName,
        prologue,
        epilogue,
        profileTemplateId: profileTemplateId || ''
      })
    }
  }

  componentWillUnmount() {
    this.props.resetOnboardingTemplate()
  }

	componentDidMount() {
		//this.props.fetchProfileTemplates()
    this.props.fetchOnboardingTemplate(this.props.params.onboardingTemplateId)
    this.props.fetchDocuments()
	}

  addOnboardingDocument(e) {
    this.props.addOnboardingDocument((this.props.documents.list || []).filter(doc => doc.documentId == e.target.value)[0])
  }

  sortOnboardingDocument({ from, to }) {
    this.props.sortOnboardingDocument({ from, to })
  }

  deleteOnboardingDocument({ documentId }) {
    this.props.deleteOnboardingDocument(documentId)
  }

	changeProfileTemplate(e) {
		this.setState({
			profileTemplateId: e.target.value
		})
	}

  changeDisplayName(e) {
    this.setState({
      displayName: e.target.value
    })
  }

	changePrologue(prologue) {
		this.setState({
			prologue
		})
	}

	changeEpilogue(epilogue) {
		this.setState({
			epilogue
		})
	}

  saveOnboardingTemplate() {
    const { profileTemplateId, epilogue, prologue, displayName } = this.state
    const { onboardingDocumentVOs=[] } = this.props.onboardingTemplate.onboardingTemplate
    if (util.isNull(displayName)) return error('模板名称不能为空')
    if (util.isNull(prologue)) return error('欢迎语不能为空')
    if (!profileTemplateId) return error('请选择档案模板')
    //if (util.isNull(onboardingDocumentVOs)) return error('请至少选择一个定制文档')
    if (util.isNull(epilogue)) return error('结束语不能为空')

    info('更新中...', true)

    this.props.updateOnboardingTempate({
      displayName,
      profileTemplateId,
      epilogue,
      prologue,
      onboardingDocumentVOs
    }, this.props.params.onboardingTemplateId, () => {
      success('更新成功!')
      history.back()
    })
  }

  render() {
		const { list:profileTemplates=[] } = this.props.profileTemplate
    const { onboardingTemplate } = this.props.onboardingTemplate
		const { onboardingDocumentVOs: onboardingDocuments=[] } = onboardingTemplate
    let { list:documents=[] } = this.props.documents

    // 筛选掉和onboardingDocuments重复的文档
    documents = (documents || []).filter(doc => onboardingDocuments.every(({ documentId }) => documentId != doc.documentId))

    const onboardingDocumentsTableConfig = {
      model: {
        documentName: '文档名称',
        remove: '删除',
        drag: '拖拽排序'
      },
      head: false,
      config: {
        remove: .1,
        drag: .1
      },
      map: {
        drag: () => (
          <IconFont value="drag" className={style.drag}/>
        ), 
        remove: (_, item) => (
          <Link icon="close" onClick={() => this.deleteOnboardingDocument(item)}/>
        )
      }
    }

    return (
      <div>
        <TitleBar
          back
          label="编辑模板"/>
        <div className={style.list}>
          <div>
            <h2>模板名称</h2>
            <Input 
              className={style.displayName} 
              value={this.state.displayName}
              label="" 
              onChange={::this.changeDisplayName}
            />
          </div>
          <div>
            <h2>欢迎语</h2>
						<Editor
              text={this.state.prologue}
              width={566}
              options={{
                placeholder: false
              }}
              hasImage
							onChange={::this.changePrologue}
						/>
          </div>
          
					<div>
						<h2>入职文档定制</h2>
            {
              onboardingDocuments.length? (
                <Table 
                  sortable
                  className={style.onboardingDocuments}
                  sortUpdate={item => this.sortOnboardingDocument(item)}
                  data={onboardingDocuments}
                  {...onboardingDocumentsTableConfig}
                />
              ): null
            }
            <div className={style.onboardingDocumentMake}>
              <div style={{width:'300px'}}>
                <Select
                  className={style.selectDocument}
                  value=""
                  onChange={::this.addOnboardingDocument}
                >
                  <option>选择需要添加的文档...</option>
                  {
                    documents.map(({ documentId, documentName }, i) => (
                      <option key={i} value={documentId}>{ documentName }</option>
                    ))
                  }
                </Select>
              </div>
              <Link target="_blank" className={style.docManage} label="管理文档" to="#/hr/onboarding/onboarding-document"/>
            </div>
					</div>
					<div>
						<h2>结束提示</h2>
						<Editor
              text={this.state.epilogue}
              width={566}
              options={{
                placeholder: false
              }}
							onChange={::this.changeEpilogue}
						/>
					</div>
        </div>
				<Button className={style.save} label="更新" onClick={::this.saveOnboardingTemplate}/>
      </div>
    )
  }
}
